<!DOCTYPE html>
<html>
  <head>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.0.7/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/google/code-prettify/master/src/prettify.css">
    <link rel="stylesheet" type="text/css" href="../examples.css">

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.0.7/semantic.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

    <script src="../sm-core.js"></script>
    <script src="../sm-addons.js"></script>
    <script src="sm-shape.js"></script>
    <script src="../dropdown/sm-dropdown.js"></script>

    <script>
      angular.module('semantic-ui')
        .controller('MainController', function($scope) 
        {
          var bindModel = function(property, selector)
          {
              $scope.$watch( property, function(updated)
              {
                  $( selector ).shape( updated );
              });

              $scope[ property + 'Go' ] = function()
              {
                  $( selector ).shape( $scope[ property ] );
              };
          };

          $scope.animations = [
              'flip up',
              'flip down',
              'flip left',
              'flip right',
              'flip over',
              'flip back'
          ];

          bindModel( 'animation0', '.shape0' );
          bindModel( 'animation1', '.shape1' );
        })
      ;
    </script>

  </head>
  <body ng-app="semantic-ui" ng-controller="MainController">

    <div class="ui container">

      <code class="float right optional">optional</code>
      <code class="float right required">required</code> 

      <h1 class="ui header">
        <img src="http://semantic-ui.com/images/logo.png">
        <div class="content">
          Shape Directives
          <div class="sub header">Create &amp; Control Semantic UI Shape with Angular Directives</div>
        </div>
      </h1>

      <div class="ui secondary top attached segment">
        <h3 class="ui header">
          sm-shape
          <div class="sub header">Creates a shape.</div>
        </h3>
      </div>
      <div class="ui bottom attached segment">

        <h5>Attributes</h5>
        <ul>
          <li><code class="optional">settings</code> <code>=</code> a reference to a settings object to pass to the initialization function.</li>
        </ul>
        <h5>Callback Attributes</h5>
        <ul>
          <li><code class="optional">on-init</code> <code>=</code> Callback once the module is initialized, passing the initialized element as the first argument.</li>
          <li><code class="optional">on-before-change</code> <code>=</code> Callback called before side change.</li>
          <li><code class="optional">on-change</code> <code>=</code> Callback called after visible side change.</li>
        </ul>

        <h5>Example</h5>

        <pre class="ui segment prettyprint lang-html" id="code0"></pre>

        <sm-dropdown class="selection" items="animations" label="item" value="item" model="animation0"></sm-dropdown>
        <sm-button class="icon teal" ng-click="animation0Go()"><i class="refresh icon"></i></sm-button>
        <br><br>

        <div data-copy-to="#code0">
          <sm-shape class="text shape0">
            <div class="ui header side">Did you know? This side starts visible.</div>
            <div class="ui header side">Help, its another side!</div>
            <div class="ui header side active">This is the last side</div>
          </sm-shape>
        </div>

      </div>

      <div class="ui secondary top attached segment">
        <h3 class="ui header">
          sm-shape-bind
          <div class="sub header">A lightweight attribute directive which calls shape() on the element with the settings object passed to the attribute. Using this directive means you need to manage the communication between Angular and Semantic UI yourself.</div>
        </h3>
      </div>
      <div class="ui bottom attached segment">

        <pre class="ui segment prettyprint lang-html" id="code1"></pre>

        <sm-dropdown class="selection" items="animations" label="item" value="item" model="animation1"></sm-dropdown>
        <sm-button class="icon teal" ng-click="animation1Go()"><i class="refresh icon"></i></sm-button>
        <br><br>

        <div data-copy-to="#code1">
          <div class="ui text shape shape1" sm-shape-bind>
            <div class="sides">
              <div class="ui header side">Did you know? This side starts visible.</div>
              <div class="ui header side">Help, its another side!</div>
              <div class="ui header side active">This is the last side</div>
            </div>
          </div>
        </div>

      </div>

      <div class="ui tertiary segment">

        <h1>Behavior Directives</h1>
        <p>These attribute directives invoke a behavior on the component where the attribute value can be one of the following formats:</p>

        <h5>String</h5>
        <ul>
          <li>Selector to the dropdown(s) to invoke the behavior when the element with the directive is clicked.</li>
        </ul>

        <h5>Object</h5>
        <ul>
          <li><code class="required">$</code> <code>@</code> A selector string.</li>
          <li><code class="optional">evt</code> <code>@</code> The event string which triggers the behavior ('click' by default).</li>
          <li><code class="optional">enabled</code> <code>=</code> A boolean value which determines whether or not the behavior should be called when the event occurs.</li>
          <li><code class="optional">value</code> <code>=</code> The first argument to pass to the behavior if it requires one.</li>
        </ul>

        <h5>Example</h5>

        <pre class="ui segment prettyprint lang-html" id="code4"></pre>

        <div data-copy-to="#code4">
          <sm-button class="teal" sm-shape-behavior="'selector'">Execute Simple Behavior</sm-button>
          <sm-button class="teal" sm-shape-behavior="{$: 'selector', value: scopeValue1, enabled: scopeValue2, evt: 'mouseover'}">Execute Advanced Behavior</sm-button>
        </div>

      </div>

      <div class="ui secondary top attached segment">
        <h3 class="ui header">
          sm-shape-flip-up
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to flip up.</div>
        </h3>
      </div>
      <div class="ui bottom attached segment">

        <pre class="ui segment prettyprint lang-html" id="code5"></pre>

        <div data-copy-to="#code5">
          <sm-button class="teal" sm-shape-flip-up="'.shape5'">Flip Up</sm-button>
          <sm-shape class="text shape5">
            <div class="ui huge header side">Did you know? This side starts visible.</div>
            <div class="ui huge header side">Help, its another side!</div>
            <div class="ui huge header side active">This is the last side</div>
          </sm-shape>
        </div>

      </div>

      <div class="ui secondary top attached segment">
        <h3 class="ui header">
          sm-shape-flip-down
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to flip down.</div>
        </h3>
      </div>
      <div class="ui bottom attached segment">

        <pre class="ui segment prettyprint lang-html" id="code6"></pre>

        <div data-copy-to="#code6">
          <sm-button class="teal" sm-shape-flip-down="'.shape6'">Flip Down</sm-button>
          <sm-shape class="text shape6">
            <div class="ui huge header side">Did you know? This side starts visible.</div>
            <div class="ui huge header side">Help, its another side!</div>
            <div class="ui huge header side active">This is the last side</div>
          </sm-shape>
        </div>

      </div>

      <div class="ui secondary top attached segment">
        <h3 class="ui header">
          sm-shape-flip-left
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to flip left.</div>
        </h3>
      </div>
      <div class="ui bottom attached segment">

        <pre class="ui segment prettyprint lang-html" id="code7"></pre>

        <div data-copy-to="#code7">
          <sm-button class="teal" sm-shape-flip-left="'.shape7'">Flip Left</sm-button>
          <sm-shape class="text shape7">
            <div class="ui huge header side">Did you know? This side starts visible.</div>
            <div class="ui huge header side">Help, its another side!</div>
            <div class="ui huge header side active">This is the last side</div>
          </sm-shape>
        </div>

      </div>

      <div class="ui secondary top attached segment">
        <h3 class="ui header">
          sm-shape-flip-right
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to flip right.</div>
        </h3>
      </div>
      <div class="ui bottom attached segment">

        <pre class="ui segment prettyprint lang-html" id="code8"></pre>

        <div data-copy-to="#code8">
          <sm-button class="teal" sm-shape-flip-right="'.shape8'">Flip Right</sm-button>
          <sm-shape class="text shape8">
            <div class="ui huge header side">Did you know? This side starts visible.</div>
            <div class="ui huge header side">Help, its another side!</div>
            <div class="ui huge header side active">This is the last side</div>
          </sm-shape>
        </div>

      </div>

      <div class="ui secondary top attached segment">
        <h3 class="ui header">
          sm-shape-flip-over
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to flip over.</div>
        </h3>
      </div>
      <div class="ui bottom attached segment">

        <pre class="ui segment prettyprint lang-html" id="code9"></pre>

        <div data-copy-to="#code9">
          <sm-button class="teal" sm-shape-flip-over="'.shape9'">Flip Over</sm-button>
          <sm-shape class="text shape9">
            <div class="ui huge header side">Did you know? This side starts visible.</div>
            <div class="ui huge header side">Help, its another side!</div>
            <div class="ui huge header side active">This is the last side</div>
          </sm-shape>
        </div>

      </div>

      <div class="ui secondary top attached segment">
        <h3 class="ui header">
          sm-shape-flip-back
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to flip back.</div>
        </h3>
      </div>
      <div class="ui bottom attached segment">

        <pre class="ui segment prettyprint lang-html" id="codeA"></pre>

        <div data-copy-to="#codeA">
          <sm-button class="teal" sm-shape-flip-back="'.shapeA'">Flip Back</sm-button>
          <sm-shape class="text shapeA">
            <div class="ui huge header side">Did you know? This side starts visible.</div>
            <div class="ui huge header side">Help, its another side!</div>
            <div class="ui huge header side active">This is the last side</div>
          </sm-shape>
        </div>

      </div>

      <div class="ui secondary segment">
        <h3 class="ui header">
          sm-shape-set-next-side
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to set the next side to a specific selector.</div>
        </h3>
      </div>

      <div class="ui secondary segment">
        <h3 class="ui header">
          sm-shape-reset
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to remove all inline styles.</div>
        </h3>
      </div>

      <div class="ui secondary segment">
        <h3 class="ui header">
          sm-shape-queue
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to queue an animation till after current animation.</div>
        </h3>
      </div>

      <div class="ui secondary segment">
        <h3 class="ui header">
          sm-shape-repaint
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to forces a reflow on the element(s).</div>
        </h3>
      </div>

      <div class="ui secondary segment">
        <h3 class="ui header">
          sm-shape-set-default-side
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to set the next side to next sibling to active element.</div>
        </h3>
      </div>

      <div class="ui secondary segment">
        <h3 class="ui header">
          sm-shape-set-stage-size
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to set shape to the content size of the next side.</div>
        </h3>
      </div>

      <div class="ui secondary segment">
        <h3 class="ui header">
          sm-shape-refresh
          <div class="sub header">When a DOM event fires on the element with the directive, it can command shape(s) to refresh the selector cache for element sides.</div>
        </h3>
      </div>

    <script src="../examples.js"></script>

  </body>
</html>